<template>
    <view class="h_body">
        <!-- <nut-popup position="bottom" :style="{ height: '50%' }" round v-model:visible="show">
            <goodsInfoPop :goodsPopPublic="goodsPopPublic" :popType="popType" :text="text" @publicResult="publicResult">
            </goodsInfoPop>
        </nut-popup> -->
        <view class="h_card goods_header">
            <view class="row">
                <view class="goods_header_row_top">
                    <view class="goods_header_row_left">
                        <span>货物名称</span>
                        <span class="icon">*</span>
                    </view>
                    <view class="goods_header_row_right" @click="gotoContranband">了解禁运品</view>
                </view>
                <view class="goods_header_row_div" @click="openGoodsNamePop">
                    <nut-input v-model="goodsInfo.goodsName" placeholder="请输入或选择货物名称" />
                </view>
            </view>
            <view class="row">
                <view class="goods_header_row_top">
                    <view class="goods_header_row_left">
                        <span>货物类型</span>
                        <span class="icon">*</span>
                    </view>
                </view>
                <view class="goods_header_row_div" @click="openGoodsTypePop">
                    <nut-input v-model="goodsInfo.goodsType" placeholder="请输入或选择货物类型" />
                </view>
            </view>
            <view class="row">
                <view class="goods_header_row_top">
                    <view class="goods_header_row_left">
                        <span>货物包装</span>
                        <span class="icon">*</span>
                    </view>
                </view>
                <view class="goods_header_row_div" @click="openGoodsPackingPop">
                    <nut-input v-model="goodsInfo.packing" placeholder="请输入或选择货物包装" />
                </view>
            </view>

        </view>
        <view class="h_card goods_content">
            <view class="row">
                <view class="goods_content_left_text">货物重量</view>
                <view class="goods_content_right">
                    <view class="computer">
                        <nut-input-number min="0" v-model="goodsInfo.goodsWeight" step="0.01" decimal-places="2" />
                    </view>
                    <view class="icon">Kg</view>
                </view>
            </view>
            <view class="row">
                <view class="goods_content_left_text">货物数量</view>
                <view class="goods_content_right">
                    <view class="computer">
                        <nut-input-number min="0" v-model="goodsInfo.goodsNumber" />
                    </view>
                    <view class="icon">件</view>
                </view>
            </view>
            <view class="row">
                <view class="goods_content_left_text">货物体积</view>
                <view class="goods_content_right">
                    <view class="computer">
                        <nut-input-number disabled v-model="goodsInfo.goodsVolum" min="0" step="0.01" decimal-places="2" />
                    </view>
                    <view class="icon">m³</view>
                </view>
            </view>
            <view class="goods_specifications">
                <view class="goods_specifications_list" v-for="(item, index) in goodsInfo.specifications" :key="index">
                    <view class="goods_specifications_list_div" style=" margin-left: 24rpx;">
                        <nut-input placeholder="长" v-model="item.l" type="number"
                            @input="item.l = item.l.replace(/^(0+)|[^\d]+/g, '')" input-align="center"
                            @update:model-value="volumeCount" />
                        <view class="d">cm</view>
                    </view>
                    <view class="icon">x</view>
                    <view class="goods_specifications_list_div">
                        <nut-input placeholder="宽" v-model="item.w" type="number"
                            @input="item.w = item.w.replace(/^(0+)|[^\d]+/g, '')" input-align="center"
                            @update:model-value="volumeCount" />
                        <view class="d">cm</view>
                    </view>
                    <view class="icon">x</view>
                    <view class="goods_specifications_list_div">
                        <nut-input placeholder="高" v-model="item.h" type="number"
                            @input="item.h = item.h.replace(/^(0+)|[^\d]+/g, '')" input-align="center"
                            @update:model-value="volumeCount" />
                        <view class="d">cm</view>
                    </view>
                    <view class="icon">x</view>
                    <view class="goods_specifications_list_div">
                        <nut-input placeholder="件数" v-model="item.sum" type="number"
                            @input="item.sum = item.sum.replace(/^(0+)|[^\d]+/g, '')" input-align="center"
                            @update:model-value="volumeCount" />
                        <view class="d">件</view>
                    </view>
                    <view @click="addSpecifications" v-if="index == 0">
                        <image src="@/assets/images/index/woyaofahuo_icon_tianjiaguige.png"></image>
                    </view>
                    <view @click="delSpecifications(index)" v-else>
                        <image src="@/assets/images/index/woyaofahuo_icon_shanchuguige.png"></image>
                    </view>
                </view>
            </view>
        </view>

        <view class="goods_foot">
            <view class="button" @click="sure">确 定</view>
        </view>
    </view>
</template>
<script setup lang='ts'>
import { ref } from "vue";
//   import { GoodsType } from "./goodsType";
//   import useSendGoodsStore from "../../store/sendGoods";

// import goodsInfoPop from "./goodsInfoPop.vue";
//   import { publicInfo } from "@/@api/index";
import Taro, { useRouter, useDidShow, useReady } from "@tarojs/taro";
//初始化
// useDidShow(async () => {
//     //初始化判断是新增还是修改货物信息
//     console.log(sendGoodsStore.goodsAddOrEditIndex, "diandiandaindiadnaidni");
//     console.log(sendGoodsStore.goodsInfo);

//     if (sendGoodsStore.goodsAddOrEditIndex != null) {
//         goodsInfo.value =
//             sendGoodsStore.goodsInfo[sendGoodsStore.goodsAddOrEditIndex];
//     } else {
//         goodsInfo.value = {
//             goodsName: "",
//             goodsVolum: "",
//             goodsNumber: "",
//             goodsType: "",
//             packing: "",
//             goodsWeight: "",
//             specifications: [
//                 {
//                     w: "",
//                     h: "",
//                     l: "",
//                     sum: "",
//                 },
//             ],
//         };
//     }

//     console.log(goodsInfo.value);
// });
//确定
const router = useRouter()
useReady(() => {

    console.log(router, 158);

    Taro.setNavigationBarTitle({
        title: '新增货物'
    })
})
function sure() {
    if (goodsInfo.value.goodsName == "") {
        Taro.showToast({
            icon: "none",
            title: "货物名称不能为空",
        });
        return;
    }
    if (goodsInfo.value.goodsType == "") {
        Taro.showToast({
            icon: "none",
            title: "货物类型不能为空",
        });
        return;
    }
    if (goodsInfo.value.packing == "") {
        Taro.showToast({
            icon: "none",
            title: "货物包装不能为空",
        });
        return;
    }
    if (goodsInfo.value.goodsWeight == "") {
        Taro.showToast({
            icon: "none",
            title: "货物重量不能为空",
        });
        return;
    }
    if (goodsInfo.value.goodsNumber == "") {
        Taro.showToast({
            icon: "none",
            title: "货物数量不能为空",
        });
        return;
    }
    let v = false;
    goodsInfo.value.specifications.forEach((item) => {
        if (!(item.h && "" && item.w == "" && item.l == "" && item.sum == "")) {
            if (item.h == "" || item.w == "" || item.l == "" || item.sum == "") {
                v = true;
            }
        }
    });
    if (v) {
        Taro.showToast({
            icon: "none",
            title: "请填写完整的货物规格",
        });
        return;
    }
    if (sendGoodsStore.goodsAddOrEditIndex != null) {
        sendGoodsStore.goodsInfo[sendGoodsStore.goodsAddOrEditIndex] =
            goodsInfo.value;
    } else {
        sendGoodsStore.goodsInfo.push(goodsInfo.value);
    }

    let vo = 0;
    let w = 0;
    let n = 0;
    sendGoodsStore.goodsInfo.forEach((it) => {
        vo = vo + Number(it.goodsVolum);
        w = w + Number(it.goodsWeight);
        n = n + Number(it.goodsNumber);
    });

    sendGoodsStore.goodsNumber = n;

    sendGoodsStore.goodsVolum = vo;

    sendGoodsStore.goodsWeight = w;
    Taro.navigateBack();
}
//体积计算
function volumeCount() {
    let all = 0;
    goodsInfo.value.specifications.forEach((item) => {
        all =
            all +
            Number(item.h != "" ? item.h : 0) *
            Number(item.l != "" ? item.l : 0) *
            Number(item.w != "" ? item.w : 0) *
            Number(item.sum != "" ? item.sum : 0);
    });
    console.log(all, "hahahahahahahahh");

    if (all == 0) {
        goodsInfo.value.goodsVolum = "0";
    } else {
        all = Number((all / 1000000).toFixed(2));
        //console.log((all/100).toFixed(2))

        if (all == 0) {
            goodsInfo.value.goodsVolum = "0.01";
        } else {
            goodsInfo.value.goodsVolum = String(all);
        }
    }
}
function gotoContranband() {
    Taro.navigateTo({
        url: "/pages3/sendGoods/contraband",
    });
}
const goodsPopPublic = ref<any>([]);
//弹出框  0 货物名称 1 货物类别 2 货物包装
const popType = ref<string>("0");
//弹出框
const show = ref<boolean>(false);
//弹出框提示
const text = ref<string>("");
//打开弹窗
async function openGoodsNamePop() {
    const res = await publicInfo({ ssopSign: 1 });
    goodsPopPublic.value = res;
    popType.value = "0";
    text.value = "请输入或选择货物名称";
    show.value = true;
}
async function openGoodsTypePop() {
    const res = await publicInfo({ ssopSign: 2 });
    goodsPopPublic.value = res;
    popType.value = "1";
    text.value = "请输入或选择货物类型";
    show.value = true;
}
async function openGoodsPackingPop() {
    const res = await publicInfo({ ssopSign: 3 });
    goodsPopPublic.value = res;
    popType.value = "2";
    text.value = "请输入或选择货物包装";
    show.value = true;
}
//弹窗返回
function publicResult(e: string) {
    show.value = false;
    if (popType.value == "0") {
        goodsInfo.value.goodsName = e;
    } else if (popType.value == "1") {
        goodsInfo.value.goodsType = e;
    } else if (popType.value == "2") {
        goodsInfo.value.packing = e;
    }
}
//发货页面仓库信息
// const sendGoodsStore = useSendGoodsStore();
//计数器
const value = ref(1);
//整个货物大变量
const goodsInfo = ref<GoodsType>({
    goodsName: "",
    goodsVolum: "",
    goodsNumber: "",
    goodsType: "",
    packing: "",
    goodsWeight: "",
    specifications: [
        {
            w: "",
            h: "",
            l: "",
            sum: "",
        },
    ],
});
// 货物规格新增
function addSpecifications() {
    goodsInfo.value.specifications.push({
        w: "",
        h: "",
        l: "",
        sum: "  ",
    });
}
// 货物规格删除
function delSpecifications(index: number) {
    goodsInfo.value.specifications.splice(index, 1);
}
</script>
<style lang="scss">
.goods_foot {
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    z-index: 4;
    padding: 40rpx 0;
}

.button {
    width: 650rpx;
    background: linear-gradient(90deg, #0966ff 2%, #0658de 99%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    height: 100rpx;
    border-radius: 50rpx;

    font-family: PingFang SC;
    font-size: 32rpx;
}

.goods_header {
    margin-top: 25rpx;

    .row {
        width: 100%;
        height: 191rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-bottom: 1rpx #f5f5f5 solid;

        .goods_header_row_top {
            height: 60rpx;
            width: 654rpx;
            //   background-color: red;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .goods_header_row_left {
                font-family: PingFang SC Medium;
                font-size: 28rpx;
                color: #252525;
                font-weight: 700;
                display: flex;

                .icon {
                    color: red;
                    margin-left: 10rpx;
                }
            }

            .goods_header_row_right {
                font-family: PingFangSC-Regular;
                font-size: 24rpx;
                color: #666666;
            }
        }

        .goods_header_row_div {
            height: 72rpx;
            width: 654rpx;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            position: relative;

            .nut-input {
                padding: 0;
                height: 40rpx;
                width: 400rpx;
                background-color: unset;
            }
        }
    }
}

.goods_content {
    margin-top: 25rpx;
    margin-bottom: 200rpx;

    .row {
        height: 104rpx;
        width: 100%;
        display: flex;
        align-items: center;

        .goods_content_left_text {
            font-family: PingFang SC Medium;
            font-size: 28rpx;
            font-weight: 700;
            margin-left: 24rpx;
        }

        .goods_content_right {
            margin-left: 230rpx;
            display: flex;

            .computer {
                width: 242rpx;
                height: 64rpx;
                border-radius: 8rpx;
                box-sizing: border-box;
                border: 1rpx solid #c4c4c4;
                display: flex;
                align-content: center;
                justify-content: center;

                .nut-input-number .h5-input,
                .nut-input-number__text--readonly,
                .nut-input-number__text--input {
                    width: 114rpx;
                }
            }

            .icon {
                font-family: PingFangSC-Semibold;
                font-size: 28rpx;
                font-weight: 700;
                color: #252525;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 32rpx;
            }
        }
    }

    .goods_specifications {
        width: 100%;

        .goods_specifications_list {
            width: 100%;
            height: 80rpx;
            display: flex;
            align-items: center;
            margin-bottom: 12rpx;

            .icon {
                width: 34rpx;
                text-align: center;
            }

            image {
                width: 32rpx;
                height: 32rpx;
                margin-left: 26rpx;
            }

            .goods_specifications_list_div {
                width: 124rpx;
                height: 64rpx;
                background: #f5f5f5;
                display: flex;
                align-items: center;

                .nut-input {
                    padding: 0;
                    width: 80rpx;
                    background-color: unset;
                }

                .d {
                    height: 100%;
                    width: 44rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: PingFangSC-Regular;
                    font-size: 24rpx;

                    color: #666666;
                }
            }
        }
    }
}

.goods_header_row_div:before {
    position: absolute;
    top: 0;
    right: 30px;
    bottom: 0;
    display: block;
    margin: auto;
    width: 30px;
    height: 30px;
    color: #8799a3;
    content: "\e6a3";
    text-align: center;
    font-size: 34px;
    font-family: cuIcon;
    line-height: 30px;
}
</style>